<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-24 09:45:03
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 15:07:24
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 工作台=》任务分配
-->


<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="header">
      <view class="fixedPane">
        <view class="select_type">
          <picker mode="selector" class="selector" :range="selectRange.type" range-key="label"
            @change="selector($event, 'type')">
            <view>搜索类型：{{ searchObject.type }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>
        </view>

        <view class="search_bar" v-if="searchObject.type === '项目名称'">
          <view class="search_input">
            <input :placeholder="placeholder_search" v-model="searchObject.projectName" :maxlength="20"
              @blur="switching" />
            <view class="cuIcon-search" />
          </view>
        </view>

        <view class="search_bar" v-if="searchObject.type === '任务名称'">
          <view class="search_input">
            <input :placeholder="placeholder_search" v-model="searchObject.taskName" :maxlength="20"
              @blur="switching" />
            <view class="cuIcon-search" />
          </view>
        </view>


        <view class="select_type">
          <picker mode="selector" class="selector" :range="selectRange.taskState" range-key="label"
            @change="selector($event, 'taskState')">

            <view>任务状态：{{ searchObject.taskState || '全部' }}
              <view class="cuIcon-unfold" />
            </view>

          </picker>
        </view>
      </view>

    </view>

    <!-- 内容 -->
    <view class="main" v-if="list.length > 0">
      <scroll-view-y @refresh="refresh()" @getMore="getMore()" :pageNo="searchObject.pageNo"
        :pageSize="searchObject.pageSize" :total="total" :height="376">
        <view slot="scrollView_content" :style="contentHeight + paddingBottom">
          <view v-for="item, i in list" :key="i">
            <view :class="'card state' + item.state" @click="toForm(item.taskId)">
              <view class="title">{{ item.name }}</view>
              <view class="subTitle">项目名称：{{ item.projectName }}</view>
              <view class="subTitle">项目负责人是否确认：{{ item.isConfirmName }}</view>
              <view class="content">时间范围：{{ item.startDate }} 至 {{ item.endDate }}</view>
            </view>
          </view>
        </view>
      </scroll-view-y>
      <view style="height: 100rpx"></view>
    </view>
    <no-data v-else text="暂无报告"></no-data>
    <!-- 底部新增 -->
    <view class="footer" :style="paddingBottom" v-if="authorityList.indexOf('module:info:add') != '-1'">
      <view class="btn_add" @click="toForm()">
        <view class="cuIcon-add" />
        新增任务
      </view>
    </view>
  </view>
</template>
<script>
import ScrollViewY from '@/components/scrollViewY/index.vue'
import { mapState } from "vuex";
export default {
  components: { ScrollViewY },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList
    }
  },
  data() {
    return {
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "任务列表"
        }
      },

      selectRange: {
        type: [ // 搜索类型
          { label: '项目名称', value: '项目名称' },
          { label: '任务名称', value: '任务名称' },
        ],
        taskState: [ // 反馈
          { label: '未执业', value: '1' },
          { label: '执业中', value: '2' },
          { label: '已执业', value: '3' },
          // { label: '待审核', value: '4' },
          // { label: '已审核', value: '5' },
          // { label: '已完成', value: '6' },
          { label: '全部', value: '' },
        ]
      },
      list: [],
      searchObject: {
        type: '项目名称',
        typeReference: '', // 项目名称(传值)
        taskState: '', // 任务状态(展示)
        taskReference: '',// 任务状态(传值)
        projectName: '', // 项目名称
        taskName: '', // 任务名称
        pageNo: 1,
        pageSize: 10
      },
      dataStatus: '刷新', // 用于解决闪烁问题
      total: 0,
      staffId: null, // 当前用户的staffId
      loading: false,
    }
  },
  onShow() {
    this.list = []
    this.searchObject.pageNo = 1
    this.getList()
  },
  methods: {
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 上拉加载
    getMore() {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
    /*
    下拉选择事件，将选中的值 放到对应的searchObject中
    e：event
    type：哪个下拉框，对应searchObject 以及 下拉框的键值对
    */
    selector(e, type) {
      // 下拉框切换赋值
      // 特殊处理，因不知道会不会引起其他错误
      if (type === 'taskState') {
        this.searchObject.taskState = this.selectRange[type][e.detail.value].label
        this.searchObject.taskReference = this.selectRange[type][e.detail.value].value
      } else {
        this.searchObject[type] = this.selectRange[type][e.detail.value].value
      }

      // 如果是切换任务状态 则刷新列表
      this.searchObject.projectName = ''
      this.searchObject.taskName = ''
      this.searchObject.pageNo = 1
      this.list = []
      this.getList()
    },

    // 跳转表单
    toForm(id) {
      // 如果有id
      if (id) {
        uni.navigateTo({
          url: './form?id=' + id + "&disabled=true&staffId=" + this.staffId
        })
      } else {
        uni.navigateTo({
          url: './form'
        })
      }
    },
    switching() {
      this.list = []
      this.searchObject.pageNo = 1
      this.getList()
    },
    // 获取列表
    getList() {
      let dist = {
        type: this.searchObject.type || '项目名称',
        taskState: this.searchObject.taskReference || '', // 任务状态(展示)
        projectName: this.searchObject.projectName || '', // 项目名称
        taskName: this.searchObject.taskName || '', // 任务名称
        pageNo: this.searchObject.pageNo,
        pageSize: this.searchObject.pageSize
      }
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store.dispatch("unitList", dist).then((res) => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.staffId = res.msg
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
      });
      // this.$store.dispatch('unitList', dist).then(res => {
      //   if (res && res.code === 200) {
      //     this.total = res.data.total;
      //     // 获取方式为刷新则覆盖，否则为push增加显示的数据
      //     this.dataStatus === '刷新' ? this.list = res.data.items : this.list.push(...res.data.items)
      //   }
      // })
    },
  },
  computed: {
    ...mapState({ authorityList: state => state.login.authorityList }), // 获取用户信息
    // 动态显示搜索提示 
    placeholder_search() {
      let placeholder = ''
      switch (this.searchObject.type) {
        case '项目名称': {
          placeholder = '请输入项目名称'
          break
        }
        case '任务名称': {
          placeholder = '请输入任务名称'
          break
        }
      }

      return placeholder
    },
    // 内容页的 最小高度 100vh - 顶部自定义标题栏 - 顶部搜索 - 底部按钮
    contentHeight() {
      // 顶部自定义导航栏高度
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight


      if (this.navigationBarHeight) {
        return 'height:calc(100vh - ' + (actionBarHeight + 136 + this.navigationBarHeight + 65) + 'px);'
      } else {
        return 'height:calc(100vh - 80rpx - 272rpx - 124rpx);'
      }
    },

    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return uni.getStorageSync("menuInfo").navigationBarHeight || uni.getStorageSync("menuInfo").statusBarHeight / 2;
    },

    // 底部新增按钮padding掉导航栏的位置
    paddingBottom() {
      if (this.navigationBarHeight) {
        return "padding-bottom:" + this.navigationBarHeight + "px !important;";
      }
      else {
        return "";
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>